// const { count } = require("console")

// const { clear } = require("console")

// console.log(arr)
getData()
function getData () {
  $.ajax({
    url: '/lieBia',
    data: {
      copuonCode: '',
      keyword: '',
      tagType: 3,
      tagValue: '1088;1089;1090;1091;1092;1093;1094;1095;1096;1097;1099;1101;1098;1100',
      pageIndex: 1
    },
    success: res => {
        // 在本地中获取到data
        var arr = localStorage.getItem('data')
        arr = JSON.parse(arr)
        var data = res.result.Products
        // console.log(data)
        // console.log(arr)
        // 在data 中把存储起来的数据筛选出来
        data = data.filter(item => {
          for (var i = 0; i < arr.length;i++) {
            if (arr[i].id === item.ProductId) {
              return true
            }
          }
        })
        // console.log(data)
        // 渲染数据
        var str = ''
        var i = 1
        var v = 1
        data.forEach(item => {
          // console.log(item)
          // item中没有number,在arr里找id一样的number

          var number = arr.find(v => v.id === item.ProductId).number
          str += `
                <div>
                <div class="product-hd">
                <input type="checkbox" cla="a${i}" cl="b${v}"
                 name="selectOne">
                <img class="avatar" src="${item.sellerLogo}" alt="">
                <span class="name">${item.sellerName}</span>
                <img class="country" src="${item.countryFlag}" alt="">
                <span class="name">${item.countryName}</span>
            </div>
            <ul class="product-bd">
                <li class="item" >
                  
                    <div class="check-product-info">
                        <dl class="product-info">
                            <dt class="pi-img">
                                <img src="${item.MainPic}" alt="">
                            </dt>
                            <dd class="pi-info">
                                <p class="pi-name">
                                   ${item.Title}
                                </p>
                            </dd>
                        </dl>
                        <div class="price">
                            <p class="current-price">${item.MaxPrice}</p>
                        </div>
                        <div class="count">
                            <div class="count-check">
                                <span class="reduce">-</span>
                                <input  cla="a${i}"class="shuliang" type="text"  value="${number}">
                                <span class="add" data-number=${item.Stock}>+</span>
                            </div>
                        </div>
                        <div class="sum" cl="b${v}">${(number*item.MaxPrice).toFixed(2)}</div>
                        <div class="operate">
                            <p class="del" data-id="${item.ProductId}">删除</p>
                            </div>
                    </div>
                </li>
            </ul>
            </div>
                `
          i++
          v++
        })
        $('.product-list-wrap').append(str)
      
      // 全选功能
      selectAll()
      // 删除购物车的功能
      remove()
      // 计数功能
      count()
      // 数量加减功能
      addReduce()
      // 删除选中的商品
      clear()
    }
  })
}

// 删除选中的商品
function clear () {
  var shan = $('.del-checked')[0]
  console.log($('.del-checked'))
  shan.onclick = function () {
    layer.confirm('你确定要删除选中商品吗？', {
      btn: ['确定', '取消']
    }, () => {
      //    获取选中的单个的复选框
      var selectOne = $('[name="selectOne"]')
      // 如果复选框是选中的状况，那么被选择到
      for (var i = 0; i < selectOne.length; i++) {
        if (selectOne[i].checked) {
          $(selectOne[i]).parent().parent().remove()
          var data = localStorage.getItem('data')
          var username = localStorage.getItem('name')
          data = JSON.parse(data)
          // 筛选当前这条数据的下标
          var index = data.findIndex(item => item.username === username && item.id === $(this).attr('data-id'))
          console.log(index)
          // 根据下标删除数组中的一个对象
          data.splice(index, 1)
          // 筛选是否还有当前用户的数据
          var arr = data.filter(item => item.username === username)
          // 如果没有了
          if (arr.length == 0) {
            // 空空如也
            var str = `
                                <div class="jumbotron">
                                    <h1>购物车空空如也！</h1>
                                    <p>赶紧去列表页挑选喜欢的商品吧！</p>
                                    <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去列表页</a></p>
                                </div>
                            `
            // 把str放在页面中
            document.querySelector('.product-list-wrap').innerHTML = str
          }
          // 删除以后 的数组重新存入本地存储
          localStorage.setItem('data', JSON.stringify(data))
          // 重新调用数量
          count()
          // show()
          layer.msg('删除成功', {
            icon: 1,
            time: 1500
          })
        }
      }
    })
  }
}
// 数量加减功能
function addReduce () {
  // 遍历所有的减按钮
  var reduce = $('.reduce')
  // 循环绑定事件
  var username = localStorage.getItem('name')
  for (var i = 0; i < reduce.length;i++) {
    reduce[i].onclick = function () {
      // 获取数量
      var number = this.nextElementSibling.value
      number = number - 1
      if (number <= 1) {
        number = 1
      }
      // 放在数量框里
      this.nextElementSibling.value = number
      // 改变本地存储
      var data = localStorage.getItem('data')
      data = JSON.parse(data)
      var obj = data.find(item => item.id == $('.del').attr('data-id') && item.username == username)
      obj.number = number
      localStorage.setItem('data', JSON.stringify(data))
     
      // 修改小计
      this.parentElement.parentElement.nextElementSibling.innerText = (number * this.parentElement.parentElement.previousElementSibling.innerText).toFixed(2)
      // console.log(this.parentElement.parentElement.previousElementSibling)
     count()
    }
    
  }
  // 获取所有的加按钮
  var add = $('.add')
  for (var i = 0; i < add.length;i++) {
    add[i].onclick = function () {
      // 获取数量
      var number = this.previousElementSibling.value
      number = number - 0 + 1
      if (number >= this.getAttribute('data-number')) {
        number = this.getAttribute('data-number')
      }
      // 放在数量框里
      this.previousElementSibling.value = number
      // 改变本地存储
      var data = localStorage.getItem('data')
      data = JSON.parse(data)
      var obj = data.find(item => item.id == $('.del').attr('data-id') && item.username == username)
      obj.number = number
      localStorage.setItem('data', JSON.stringify(data))
   
      // 修改小计
      this.parentElement.parentElement.nextElementSibling.innerText = (number * this.parentElement.parentElement.previousElementSibling.innerText).toFixed(2)
      // console.log(this.parentElement.parentElement.previousElementSibling)
      count()
    }
  }
}
// 计数功能
function count () {
  var selectOne = $('[name="selectOne"]')
  // 遍历判断每一个是否选中
  var totalNum = 0
  var totalPrice = 0
  for (var i = 0; i < selectOne.length; i++) {
    if (selectOne[i].checked) {
      // console.log($(selectOne[i]))
      var b = $(selectOne[i]).attr('cla')
    
      $('[cla=' + b + ']')[1]
      console.log( $('[cla=' + b + ']'));

      // 总数量
      totalNum += $('[cla=' + b + ']')[1].value - 0
      // 总价格
      var c = $(selectOne[i]).attr('cl')
      $('[cla=' + c + ']')[1]
      // console.log( $('[cl=' + c + ']')[1])
      totalPrice += $('[cl=' + c + ']')[1].innerText - 0
    }
  }
  // console.log(totalNum)
  $('.aw-info>.num').text(totalNum)
  $('.aw-info>.total').text(totalPrice)
}
// 删除购物车
function remove () {
  // 获取所有的删除按钮
  var removes = $('.del')
  // 遍历绑定单击事件
  for (var i = 0; i < removes.length; i++) {
    removes[i].onclick = function () {
      layer.confirm('你确定要删除吗？', {
        btn: ['确定', '取消']
      }, () => {
        // 删除了
        $(this).parent().parent().parent().parent().parent().remove()
        // 删除本地存储中的数据
        var data = localStorage.getItem('data')
        var username = localStorage.getItem('name')
        data = JSON.parse(data)
        // 筛选当前这条数据的下标
        var index = data.findIndex(item => item.username === username && item.id === $(this).attr('data-id'))
        console.log(index)
        // 根据下标删除数组中的一个对象
        data.splice(index, 1)
        // 筛选是否还有当前用户的数据
        var arr = data.filter(item => item.username === username)
        // 如果没有了
        if (arr.length == 0) {
          // 空空如也
          var str = `
                        <div class="jumbotron">
                            <h1>购物车空空如也！</h1>
                            <p>赶紧去列表页挑选喜欢的商品吧！</p>
                            <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去列表页</a></p>
                        </div>
                    `
          // 把str放在页面中
          document.querySelector('.product-list-wrap').innerHTML = str
        }
        // 删除以后 的数组重新存入本地存储
        localStorage.setItem('data', JSON.stringify(data))
        // 重新调用数量
        count()
        layer.msg('删除成功', {
          icon: 1,
          time: 1500
        })
      })
    }
  }
}
// 全选功能
function selectAll () {
  // 全选按钮
  var selectAll = $('[name="selectAll"]')
  // 单个的复选框
  var selectOne = $('[name="selectOne"]')
  // 遍历全选按钮
  for (var i = 0; i < selectAll.length;i++) {
    selectAll[i].onclick = function () {
      // 其他的单选根据当前的点击的全选按钮，设置选中状态
      for (var j = 0; j < selectOne.length;j++) {
        selectOne[j].checked = this.checked
      }
      for (var j = 0; j < selectAll.length;j++) {
        selectAll[j].checked = this.checked
      }
      // 数量
      count()
    }
  }
  // 把selectOne转成数组
  var arr = [].slice.call(selectOne)
  arr.forEach(item => {
    item.onclick = function () {
      // 判断是不是都选中
      var bool = arr.every(v => v.checked)
      // 根据获取到的bool设置两个全选
      for (var j = 0; j < selectAll.length;j++) {
        selectAll[j].checked = bool
      }
      // 数量
      count()
    }
  })
}
